<template>
  <div class="address">
    <van-nav-bar
      title="地址管理"
      right-text="新增地址"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/adddizhi')"
    />
    <van-radio-group v-model="checked">
      <ul>
        <li v-for="(item, index) in data.addressData" :key="index">
          <div class="t">
            <div class="l">{{ item.user_name }}</div>
            <div class="r">{{ item.mobile }}</div>
          </div>
          <p>{{ item.region_name }}</p>
          <div class="b">
            <div class="l">
              <van-radio icon-size="16" name="1">默认地址</van-radio>
            </div>
            <div class="r">
              <button class="edit" @click="$router.push('/adddizhi')">
                编辑
              </button>
              <button class="del" @click="del(item.id)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </van-radio-group>

    <van-empty
      v-show="data.addressData.length <= 0"
      image="https://wap.lexuemiao.com/img/noaddress.e1ed5364.png"
      image-size="80"
      description="暂无地址"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getAddressApi, delAddressApi } from '@/http/api'
import { Dialog } from 'vant'
onMounted(() => {
  getAddress()
})
const checked = ref('1')
const data = reactive({
  addressData: []
})

// 获取地址
const getAddress = async () => {
  const res = await getAddressApi()
  console.log(res)
  data.addressData = res
}

// 删除地址
const del = (id) => {
  Dialog.confirm({
    title: '标题',
    message: '收货地址删除后不可恢复，确定删除吗？'
  })
    .then(async () => {
      // on confirm
      console.log(id)
      const res = await delAddressApi(id)
      console.log(res)
      getAddress()
    })
    .catch(() => {
      // on cancel
    })
}
</script>
<style lang="scss" scoped>
ul {
  padding: 20px;
  li {
    font-size: 14px;
    .t {
      display: flex;
      .l {
        width: 100px;
      }
    }
    p {
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      color: #666;
    }
    .b {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .r {
        .edit {
          padding: 10px 30px;
          border-radius: 30px;
          background-color: #fff;
          font-size: 13px;
          border: 1px solid #ccc;
          color: #ccc;
          margin-right: 40px;
        }
        .del {
          padding: 10px 30px;
          border-radius: 30px;
          background-color: #fff;
          font-size: 13px;
          border: 1px solid #f00;
          color: #f00;
        }
      }
    }
  }
}
</style>
